<template>
    <div>
        <div>
            <a-button style="margin-left: 8px;margin-bottom:50px" @click="goBack()">返回</a-button>
        </div>
        <div style="display:flex;margin-bottom:20px">
            <span class="label">标题:</span> <a-input v-model="title" style="width:720px" />
        </div>
        <div style="display:flex;margin-bottom:20px">
            <span class="label">简述:</span> <a-input v-model="content" style="width:720px" />
        </div>
        <div style="display:flex;margin-bottom:20px">
            <span class="label">缩略图:</span>
            <span><a-input style="width:220px"  v-model="UploadImg"/></span> 
            <a-upload
                name="files"
                action="/api/v1/admin/uploadFile"
                @change="handleImgUpload"
                :show-upload-list="false">
                <a-button type="primary">上传</a-button>
            </a-upload>

            <span class="label">换取图片路径:</span>
            <span><a-input style="width:220px"  v-model="UploadImg2"/></span> 
            <a-upload
                name="files"
                action="/api/v1/admin/uploadFile"
                @change="handleImgUpload2"
                :show-upload-list="false">
                <a-button type="primary">上传</a-button>
            </a-upload>
        </div>
        <div ref="editorElem" style="text-align:left;"></div>
        <div style="padding-left:80px;padding-top:60px">
            <a-button type="primary" style="width:160px" @click="submitAdd">确认提交</a-button>
        </div>
    </div>
</template>

<script>
import E from 'wangeditor'
import { noticeAdd, noticeMod } from '@/api/getData'
export default {
    name: 'SystemMsg',
    data () {
        return{
            editor: null,
            editorContent: '',
            UploadImg: '',
            UploadImg2: '',
            title: '',
            thumb_path: '',
            content: '',
            noticeItem: '',
            editorfleg: false
        }
    },
    mounted(){
        this.editor = new E(this.$refs.editorElem);
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
        this.editorContent = html;
        };
        this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
        ];
        this.editor.create(); // 创建富文本实例
        if(this.$route.query.updata == 0){
            let value = sessionStorage.getItem("noticeItem"); 
            let noticeItem = JSON.parse(value)
            this.noticeItem = noticeItem
            this.title = noticeItem.title
            this.UploadImg = noticeItem.thumb_path1
            this.content = noticeItem.content
            this.editorContent = noticeItem.detail
            this.editor.txt.html(noticeItem.detail)
            this.editorfleg = true
        }
        
    },
    methods:{
        submitAdd(){
            if(this.editorfleg){
                noticeMod(this.title, this.UploadImg, this.content, this.editorContent,this.noticeItem.id).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                        this.$message.success(`${res.msg}`);
                        this.$router.back()
                    }
                })
                return
            }
            if(this.title && this.UploadImg && this.content){
                noticeAdd(this.title, this.UploadImg, this.content, this.editorContent).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                        this.$message.success(`${res.msg}`);
                        this.$router.back()
                    }
                })
            }else{
                this.$message.error(`请确认标题、简述、缩略图不为空`);
            }
            
        },
        handleImgUpload(info){
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`);
                this.UploadImg = info.file.response.data.path
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`);
            }
        },
        handleImgUpload2(info){
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`);
                this.UploadImg2 = info.file.response.data.host_path
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`);
            }
        },
        goBack(){
            this.$router.back()
        },
    }
}

</script>
<style>
.label{
    width:100px;
    margin-right:20px;
    text-align:right;
    line-height: 32px;
}
</style>
